<template>
  <view class="work-container">
    <NavBar title="待办事项" :isShowLeft="false">
      <view class="notice-icon" @click="goToNotice()">
        <uni-badge
          class="uni-badge-left-margin"
          :is-dot="true"
          absolute="rightTop"
          size="small"
          :customStyle="{ background: '#C87C32' }"
        >
          <image src="/static/images/message/icon-message.png"></image>
          <span class="count" v-if="unreadCount">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
        </uni-badge>
      </view>
    </NavBar>
    <view v-if="isFirstRender" class="loading-view">
      <u-loading-icon mode="circle" size="32px"></u-loading-icon>
      <view style="font-size: 32rpx; line-height: 40rpx; margin-top: 10px; color: #666">正在加载中...</view>
    </view>
    <todo v-else :data="data"></todo>
  </view>
</template>

<script>
import ULoadingIcon from '@/uni_modules/uview-ui/components/u-loading-icon/u-loading-icon.vue'
import todo from './components/todo.vue'
import {
  getTodoData,
  getDeviceTaskMsg,
  reqGetEduTodoCount,
  getTicketAnalysisTodoTotal,
  reqUnreadMessageCount
} from '@/api/message/index.js'
import { approveNum, getSpecialWorkCount } from '@/api/spw/project'
import { getAlarmInfoMsg } from '@/api/alarm-info'
import { getTrainingResearchList } from '@/api/educational-training/training-research'
import { getAiAlarmTodoCount } from '@/api/ai-alarm'
import NavBar from '@/pages/messages/components/nav-bar.vue'
export default {
  components: {
    NavBar,
    todo,
    ULoadingIcon
  },
  data() {
    return {
      tabIndex: 1,
      isFirstRender: true,
      data: null,
      unreadCount: 0
    }
  },
  onShow() {
    this.initData()
    this.getNotice()
  },
  onHide() {
    this.clearNotice()
  },
  methods: {
    async getNotice() {
      this.clearNotice()
      reqUnreadMessageCount().then((res) => {
        this.unreadCount = res.data.count
        this.noticeTimer = setTimeout(() => {
          this.getNotice()
        }, 1000 * 10)
      })
    },
    clearNotice() {
      this.noticeTimer && clearTimeout(this.noticeTimer)
    },
    goToNotice() {
      uni.navigateTo({
        url: '/pages/messages/notice'
      })
    },
    async initData() {
      if (this.tabIndex === 1) {
        const res1 = await getTodoData().catch((e) => {})
        // const res2 = await getMyToDoList();
        const res3 = await getDeviceTaskMsg().catch((e) => {})
        const res4 = await reqGetEduTodoCount().catch((e) => {})
        const res5 = await getAlarmInfoMsg().catch((e) => {})
        // const res6 = await getDockWorkCount();
        // const res7 = await getElectricTodoCount();
        const res8 = await approveNum().catch((e) => {})
        const res9 = await getSpecialWorkCount().catch((e) => {})
        const res10 = await getTrainingResearchList({ status: 'UNFILLED' }).catch((e) => {}) // 培训调研
        const res11 = await getTicketAnalysisTodoTotal().catch((e) => {}) // 作业票分析待办数量
        const res12 = await getAiAlarmTodoCount().catch((e) => {}) // AI告警待办数量
        this.data = {
          ...(res1?.data || {}),
          // ...res2.data,
          ...(res3?.data || {}),
          ...(res4?.data || {}),
          alarmInfoCount: res5?.data?.count,
          surveyCount: res10?.total,
          // dockWorkCount: res6.data,
          // electricTodoCount: res7.data,
          projectNum: res8?.data,
          workTicketTodoCount: res9?.data?.count || 0,
          ticketAnalysisTodoCount: res11?.data?.count || 0,
          aiAlarmTodoCount: res12?.data?.todoAlarmCount || 0
        }
        this.isFirstRender = false
      } else {
        // 加载消息数据
        this.data = null
      }
    },
    onTabChange(obj) {
      this.tabIndex = obj.index
      this.initData()
    },
    onTabItemTap(e) {}
  }
}
</script>

<style lang="scss" scoped>
.notice-icon {
  margin-top: 8rpx;
  margin-right: 6rpx;

  image {
    width: 35.45rpx;
    height: 36.51rpx;
  }

  .count {
    display: inline-block;
    width: 40rpx;
    height: 40rpx;
    background-color: #c87c32;
    color: #fff;
    border-radius: 50%;
    font-size: 24rpx;
    text-align: center;
    line-height: 40rpx;
    position: absolute;
    top: -12rpx;
    left: 16rpx;
  }
}
</style>
